<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="jianshu-log-on.css">
    <script src="jianshu-log-on.js"></script>
    <script src="index.js"></script>
    <title>Document</title>
</head>

<body>
    <h2>登录</h2>
    <input type="text" placeholder="手机号或邮箱">
    <input type="password" name="密码" id="" placeholder="密码">
    <button type="button">登录</button>

    <button type="button" class="btn" onclick="func(2,3)">func</button>
    <!-- 这个this指的是h1 这个元素（在事件中，this 表示接收事件的元素） -->
    <h1 onclick="this.innerHTML = 'change'">点击文本会变</h1>
    <h1 onclick="changetext(this)">再点击再变化</h1>

    <h2 onclick="colorChange()" type="button">点击字体颜色发生改变</h2>
    <h2 onclick="style.color = 'red'">dddd</h2>
    <p onmouseover="style.color = 'red'" onmouseout="style.color = 'yellow'">dddd</p>
    <!-- onmouseout onmouseover 通过函数来改变css的样式； -->
    <!-- ??? -->
    <button id="onmousefunc" type="button" onclick="onmouse()">dddddd函数</button>
    <img src="imags/4-1.jpg" alt="美景到水果" id="beautifulAndFruit" onmousedown="Fruit()" onmouseup="beautiful()"
        width="200px" height="300px">

    <input type="text" name="dd" id="changeInputBg" onfocus="changeInputBg()" placeholder="聚焦改变输入框的背景颜色">
    <hr>
    <!-- 2021.7.19 -->
    <button id="myBtn">click me</button>
    <p id="demo"></p>

    <!-- //用 addEventListener方法在按钮中添加点击时间，并弹出框 你好； -->
    <button type="button" id="myBtn_1">hello</button>

    <!-- 使用addEventListener方法添加多个事件 -->
    <button type="button" id="myBtn_2">hello second</button>

    <!-- 使用addEventListener 传递参数 -->
    <button type="button" id="myBtn_3">send canshu</button>
    <p id="demo_1"></p>

    <!-- 创建一个新的html元素节点 -->
    <div id="div1">
        <p id="p1">第一个段落</p>
        <p id="p2">第二个段落</p>
    </div>

    <p id="isNaN">id</p>
    <p id="number">number</p>

    <!-- 7.21 -->
    <p id="str_p1">click the button to locate where "locate" first occurs.</p>
    <p id="str_p2">0</p>
    <button onclick="myFunction_3()">点我</button>

    <P id="str_p3">This is a example.</P>
    <p id="str_p4">0</p>
    <button onclick="myFuncton_4()">click me</button>

    <!-- 字符替换 -->

    <button onclick="myFunction_5()">replace click</button>
    <p id="aReplaceB">A replace B</p>

    <!-- Date()对象 -->
    <p id="getYear">点击获取年份</p>
    <button onclick="myFunction_6()">year click</button>

    <p id="setYear">点击获取设置的年份</p>
    <button onclick="myFunction_7()">set year click</button>

    <p id="utcToString">把UTC日期转换成字符串。</p>
    <button onclick="myFunction_8()">date to string click</button>

    <p id="getDay">通过getDate()方法获得当前日期</p>
    <button onclick="myFunction_9()">date to string click</button>

    <div onload="myFunction_10">
        <div id="time">ssss</div>
    </div>

    <!-- //window assign() -->
    <button type="button" onclick="newDoc()">点击加载新的文档</button>

    <!-- window.history.back -->
    <button type="button" onclick="goBack()">点击该按钮，返回到上一个页面；</button>




    <!-- 数组对象 -->

    <script>

        //移除一个元素
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.removeChild(child);
        // or
        var child = document.getElementById("p1");
        child.parentNode.removeChild(child);

        // 创建一个新的html元素节点,并把它添加到首部/开始位置；
        var para = document.createElement("p");
        var node = document.createTextNode("在之前的新段落");
        para.appendChild(node);
        var element_bf = document.getElementById("div1");
        var child = document.getElementById("p1");
        // element_bf.appendChild(para);
        element_bf.insertBefore(para, child);
        // 创建一个新的html元素节点,并把它添加到尾部；
        //1.首先创建p元素，2.再为p元素创建一个新的文本节点。3.把文本节点添加到p元素中；
        //4.最后在一个已经存在的元素中添加 p元素（先查找已经存在的元素，再添加到已经存在的元素）
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落");
        para.appendChild(node);
        var element = document.getElementById("div1");
        element.appendChild(para);
        // 7.18
        function onmouse() {
            document.getElementById(onmousefunc).style.color = "red";

        }

        document.getElementById("myBtn").addEventListener("click", displayDate);
        // function displayDate() {
        //     document.getElementById("demo").innerHTML = Date();
        // }

        document.getElementById("myBtn_1").addEventListener("click", function () {
            alert("hello world!");
        })

        // or
        document.getElementById("myBtn_1").addEventListener("click", myFunction);

        var x = document.getElementById("myBtn_2");
        x.addEventListener("mouseout", myFunction_1);
        x.addEventListener("mousedown", myFunction_2);

        // 使用addEventListener 传递参数 ???
        var p1 = 5;
        var p2 = 4;
        document.getElementById("myBtn_3").addEventListener("click", function_3(){
            myFunction(p1, p2);
        })

        //js 对象
        var message = "hello world";
        var messageLength = message.length;
        console.log(messageLength);

        var mesToUpper = message.toUpperCase();
        console.log(mesToUpper);

        var person = new Object();
        person.firstname = "John";
        person.lastName = "kk";
        pserson.age = 50;
        person.eyecolor = "blue";
        document.write(person.firstname + "is" + person.age + "years old.");

        myFather = new person("John", "Doe", 50, "blue");
        document.write(myFather.firstname + "is" + myFather.age + "years old.");

        function person(firstname, lastname, age, eyecolor) {
            this.firstname = firstname;
            this.lastname = lastname;
            this.age = age;
            this.eyecolor = eyecolor;

            this.changeName = changeName;
            function changeName(name) {
                this.lastName = name;
            }
        }

        myMother = new person("sally", "rally", 33, black);
        myMother.changeName("Doe");
        document.write(myMother.lastname);

        //js prototype js原型

        //js number 对象 7.20
        //js默认十进制，如何把十进制转化为十六进制？
        //这个结果如何在html上显示，又如何在控制台显示？
        var myNumber = 128;
        document.write(myNumber + '是十进制');
        document.write(myNumber.toString(16) + '转化成了16进制');
        document.write(myNumber.toString(8) + '八进制');
        document.write(myNumber.toString(2) + '二进制');

        //无穷大
        var myNumber_1 = 2;
        while (myNumber_1 != Infinity) {
            myNumber_1 = myNumber_1 * myNumber_1;
            document.write(myNumber_1 + '<br> ');
        }

        var x = 1000 / "apple";
        var y = 1000 / "1123";
        document.getElementById("isNaN").innerHTML = isNaN(x) + '<br>' + isNaN(y);
        var z = 1000 / 0;
        document.getElementById("isNaN").innerHTML = isNaN(z);

        var x = 123;  //数字
        var y = new Number(123);  //对象
        var txt = typeof (x) + " " + typeof (y);
        document.getElementById("number").innerHTML = txt;
        //而且 x === y 为flase, x是一个数字， y 是一个对象

        //7.21 
        // 数组对象  失败？？？
        var myhouse = new Array();  //新建一个数组对象
        myhouse[0] = "keke";
        myhouse[1] = "jj";
        myhouse[2] = "ff";
        var i;
        for (i = 0; i < myhouse.length; i++) {
            document.write(myhouse[i] + "<br />");
        }

        //7.22
        document.write(location.href);


    </script>
</body>

</html>